<template>
	<view class="content">


		<!-- 可视化 -->
		<view style="background-color: white; border-radius: 4px; margin-top: -4px;">

			<!-- 柱形图 堆叠 -->
			<h4 style="margin-left: 12px; font-size: 16px; height: 30px; line-height: 30px;"> 柱形图 堆叠 
			</h4>
			<div class="mui-content-padded">

				<div id="dsj_zscq" style="width: calc(100vw - 40px); height: 280px;"></div>

			</div>


			<!-- 折线图 -->
			<h4 style="margin-left: 12px; font-size: 16px; height: 30px; line-height: 30px;"> 折线图
			</h4>
			<div class="mui-content-padded">

				<div id="dsj_cxcg" style="width: calc(100vw - 40px); margin: -18px 0px; height: 280px;">
				</div>

			</div>


			<!-- 柱状图 + 折线图-->
			<h4 style="margin-left: 12px; font-size: 16px; height: 30px; line-height: 30px; margin-top: 0px;">
				柱状图 + 折线图 </h4>
			<div class="mui-content-padded">

				<div id="dsj_zlhjl" style="width: calc(100vw - 40px); height: 290px;"></div>

			</div>

			<!-- 有效知识产权结构 -->
			<h4 style="margin-left: 12px; font-size: 16px; height: 30px; line-height: 30px; margin-top: 0px;">
				饼图 </h4>
			<div class="mui-content-padded">

				<div id="dsj_zscqjg" style="width: calc(100vw - 40px); height: 306px;"></div>





			</div>

			<!-- 专利iPC结构 -->
			<h4 style="margin-left: 12px; font-size: 16px; height: 30px; line-height: 30px; margin-top: 0px;">
				树形结构图 </h4>
			<div class="mui-content-padded">



				<div id="dsj_zlipc_content"
					style="margin-left: -10px;  width: calc(100vw - 40px); height: auto; margin-bottom: 30px;">
				</div>







			</div>

			<!-- 柱状图 -->
			<h4 style="margin-left: 12px; font-size: 16px; height: 30px; line-height: 30px; margin-top: 0px;">
				柱状图 </h4>
			<div class="mui-content-padded">

				<div id="dsj_zljz" style="width: calc(100vw - 40px); height: 280px;"></div>





			</div>

			<!-- 专利法律状态分布 -->
			<h4 style="margin-left: 12px; font-size: 16px; height: 30px; line-height: 30px; margin-top: 0px;">
				饼图 </h4>
			<div class="mui-content-padded">

				<div id="dsj_zlfl" style="width: calc(100vw - 40px); height: 280px;"></div>


			</div>

			<!-- 专利寿命分布 -->
			<h4 style="margin-left: 12px; font-size: 16px; height: 30px; line-height: 30px; margin-top: 0px;">
				柱状图 </h4>
			<div class="mui-content-padded">

				<div id="dsj_zlsm" style="width: calc(100vw - 40px); height: 280px;"></div>


			</div>

			<!-- 树形结构图 -->
			<h4 style="margin-left: 12px; font-size: 16px; height: 30px; line-height: 30px; margin-top: 0px;">
				树形结构图 </h4>
			<div class="mui-content-padded">

				<div id="dsj_zllhsq" style="width: calc(100vw - 40px); height: auto; margin-bottom: 30px;">
				</div>


			</div>

		</view>
	</view>
</template>

<script>
	import myIndex from '../index/index.js'



	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		mounted() {

			this.refreshEchartData();


		},
		onLoad() {


		},
		methods: {

			refreshEchartData() {
				
				// 返回数据需在json转换格式工具 转成Json格式
				let result = {
					"data": {
						"unionCompanyNum": 4,
						"goldList": [{
							"isNewRecord": true,
							"comId": "1",
							"socialCode": "123456",
							"fmsqYx": "1",
							"cfmwyxzscqsl": "1",
							"years": "1",
							"yxzscqsl": "1",
							"dnzlhjl": "1"
						}],
						"patentLifeList": [{
							"isNewRecord": true,
							"comId": "1",
							"socialCode": "123456",
							"percentage": "1",
							"quantity": "1",
							"scope": "1-3",
							"totalNum": "1"
						}, {
							"isNewRecord": true,
							"comId": "1",
							"socialCode": "123456",
							"percentage": "1",
							"quantity": "1",
							"scope": "3-5",
							"totalNum": "2"
						}, {
							"isNewRecord": true,
							"comId": "1",
							"socialCode": "123456",
							"percentage": "1",
							"quantity": "3",
							"scope": "5-10",
							"totalNum": "3"
						}, {
							"isNewRecord": true,
							"comId": "1",
							"socialCode": "123456",
							"percentage": "1",
							"quantity": "3",
							"scope": "10-",
							"totalNum": "4"
						}],
						"patentValueList": [{
							"isNewRecord": true,
							"comId": "1",
							"socialCode": "123456",
							"fmgbZs": "1",
							"fmsqYx": "1",
							"syxxYx": "1",
							"wgsjYx": "1",
							"scope": "0-5",
							"totalNum": "1",
							"percentageHighRights": "1",
							"percentageHigh": "1",
							"dspw": "1",
							"jslypw": "1"
						}, {
							"isNewRecord": true,
							"comId": "1",
							"socialCode": "123456",
							"fmgbZs": "1",
							"fmsqYx": "1",
							"syxxYx": "1",
							"wgsjYx": "1",
							"scope": "5-10",
							"totalNum": "1",
							"percentageHighRights": "1",
							"percentageHigh": "1",
							"dspw": "1",
							"jslypw": "1"
						}, {
							"isNewRecord": true,
							"comId": "1",
							"socialCode": "123456",
							"fmgbZs": "1",
							"fmsqYx": "2",
							"syxxYx": "3",
							"wgsjYx": "4",
							"scope": "90-100",
							"totalNum": "10"
						}],
						"legalList": [{
							"isNewRecord": true,
							"comId": "1",
							"socialCode": "123456",
							"underTrial": "1",
							"invalid": "1",
							"efficient": "1",
							"totalNum": "1",
							"percentage": "1"
						}],
						"propertyRightList": [{
							"isNewRecord": true,
							"comId": "1",
							"socialCode": "123456",
							"fmgbZs": "1",
							"fmgbZsP": "1",
							"fmsqYx": "1",
							"fmsqYxP": "1",
							"syxxYx": "1",
							"syxxYxP": "1",
							"wgsjYx": "1",
							"wgsjYxP": "1",
							"rzYx": "1",
							"rzYxP": "1",
							"maxPercentage": "1",
							"maxPercentageRights": "1",
							"dspw": "1",
							"jslypw": "1"
						}],
						"unionPatentNum": 13,
						"ipcList": [{
							"isNewRecord": true,
							"comId": "1",
							"socialCode": "123456",
							"ipcDept": "1",
							"ipcClass": "1",
							"ipcNum": "1",
							"ipcZbClass": "1",
							"ipcZb": "1",
							"dspw": "1",
							"jslypw": "1"
						}],
						"yearList": [{
							"isNewRecord": true,
							"comId": "1",
							"fmgbZs": "1",
							"fmsqYx": "1",
							"syxxYx": "1",
							"wgsjYx": "1",
							"rzYx": "1",
							"years": "2022",
							"dnkjcxcgkbjshl": "1",
							"socialCode": "123456"
						}, {
							"isNewRecord": true,
							"comId": "1",
							"years": "2023",
							"dnkjcxcgkbjshl": "2",
							"socialCode": "123456"
						}, {
							"isNewRecord": true,
							"comId": "1",
							"years": "2026",
							"dnkjcxcgkbjshl": "6",
							"socialCode": "123456"
						}, {
							"isNewRecord": true,
							"comId": "1",
							"years": "2027",
							"dnkjcxcgkbjshl": "7",
							"socialCode": "123456"
						}],
						"unionList": [{
							"isNewRecord": true,
							"comId": "1",
							"socialCode": "123456",
							"unionName": "测试5",
							"unionNum": "5",
							"unionCompany": "1"
						}, {
							"isNewRecord": true,
							"comId": "1",
							"socialCode": "123456",
							"unionName": "测试4",
							"unionNum": "4",
							"unionCompany": "1"
						}, {
							"isNewRecord": true,
							"comId": "1",
							"socialCode": "123456",
							"unionName": "测试3",
							"unionNum": "3",
							"unionCompany": "1"
						}, {
							"isNewRecord": true,
							"comId": "1",
							"socialCode": "123456",
							"unionName": "测试1",
							"unionNum": "1",
							"unionCompany": "1"
						}]
					},
					"statusCode": 200,
					"header": {
						"date": "Tue, 30 May 2023 07:08:28 GMT",
						"powered-by": "JeeSite V5.0.1 0",
						"transfer-encoding": "chunked",
						"content-type": "application/json"
					},
					"errMsg": "request:ok"
				};

				let resultData = result.data;
				
				if (resultData.yearList != undefined && resultData.yearList.length > 0) {
					console.log('执行图表1');
					// 填充图表1 2
					myIndex.fillChartOneTwo(resultData.yearList);

				}
				if (resultData.goldList != undefined && resultData.goldList.length > 0) {

					// 填充图表3
					myIndex.fillChartThree(resultData.goldList);

				}
				if (resultData.propertyRightList != undefined && resultData.propertyRightList.length > 0) {

					// 填充图表4
					myIndex.fillChartFour(resultData.propertyRightList);

				}
				if (resultData.ipcList != undefined && resultData.ipcList.length > 0) {

					// 填充图表5
					myIndex.fillChartFive(resultData.ipcList);

				}
				if (resultData.patentValueList != undefined && resultData.patentValueList.length > 0) {

					// 填充图表6
					myIndex.fillChartSix(resultData.patentValueList);

				}
				if (resultData.legalList != undefined && resultData.legalList.length > 0) {

					// 填充图表7 法律
					myIndex.fillChartSeven(resultData.legalList);

				}
				if (resultData.patentLifeList != undefined && resultData.patentLifeList.length > 0) {

					// 填充图表8 寿命
					myIndex.fillChartEight(resultData.patentLifeList);

				}
				if (resultData.unionList != undefined && resultData.unionList.length > 0) {

					// 填充图表9 专利联合
					myIndex.fillChartNine(resultData, "广汽集团");

				}
			}

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.mui-content-padded {
		margin: 10px 8px;
	}

	.mui-content-padded div {

		font-size: 13px;
	}
</style>